<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell required title="姓名"/>
      <van-field
        v-model="name"
        name="name"
        placeholder="请填写姓名"
        clearable
        :readonly="readonly"
      />
      <van-cell required title="年龄"/>
      <van-field
        v-model="age"
        name="age"
        clearable
        placeholder="请填写年龄"
        :readonly="readonly"
      />
      <van-cell required title="与本人关系"/>
      <van-field
        v-model="relation"
        name="relation"
        clearable
        placeholder="例如:父子"
        :readonly="readonly"
      />
      <van-cell required title="工作单位及职位"/>
      <van-field
        v-model="work_desc"
        name="work_desc"
        clearable
        placeholder="例如:重庆优快人力资源管理有限公司"
        :readonly="readonly"
      />
      <!--      报考岗位-->
      <van-cell required title="政治面貌"/>
      <van-field
        is-link
        readonly
        clickable
        name="politics"
        :value="politics"
        placeholder="--点击选择政治面貌--"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择政治面貌' }]"
      />
      <van-popup v-model="showPicker1" position="bottom" :style="{ height: '40%' }" round>
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <!--      确定添加按钮-->
      <div class="add_btn">
        <van-button @click="addContent" type="primary" size="small" :disabled="visibel">确定添加</van-button>
      </div>
      <!--      添加的list-->
      <van-swipe-cell class="add-content" @close="close" :name="index" v-for="(item,index) of lists" :key="index">
        <div>
          <van-cell center :title="item.name" :value="item.age" :label="item.relation+'--'+item.work_desc"/>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button"/>
        </template>
      </van-swipe-cell>
      <!--      下一步button-->
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="next_disabled">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'socialRelations',
  data () {
    return {
      name: '',
      age: '',
      relation: '',
      work_desc: '',
      readonly: false,
      columns1: [],
      politics: '',
      showPicker1: false,
      lists: []
    }
  },
  methods: {
    onSubmit (e) {
      this.$store.dispatch({
        type: 'person_family',
        person_family: this.lists
      })
      this.$emit('part5', false)
      this.btn_disable = true
    },
    addContent () {
      const obj = {}
      if (this.name && this.age && this.relation && this.work_desc && this.politics) {
        obj.name = this.name
        obj.age = this.age
        obj.relation = this.relation
        obj.work_desc = this.work_desc
        obj.politics = this.politics
        this.lists.push(obj)
        this.name = ''
        this.age = ''
        this.relation = ''
        this.work_desc = ''
      } else {
        this.$toast('不能有空的内容')
      }
    },
    close (e) {
      this.lists.splice(e.name, 1)
    },
    // 政治面貌处理函数
    onConfirm1 (value) {
      this.politics = value
      this.showPicker1 = false
    }
  },
  computed: {
    // 计算属性： 计算是否开启添加按钮的可显示状态
    visibel () {
      let flag = true
      if (this.name && this.age && this.relation && this.work_desc) {
        flag = false
      }
      return flag
    },
    // 计算属性--计算是否开启下一步可点击状态
    next_disabled () {
      let flag = true
      if (this.lists.length > 0) {
        flag = false
      }
      return flag
    }
  },
  mounted () {
    const that = this
    this.$ajax.get('/api/v1/options').then(function (res) {
      const data = res.data.data
      const politics = data.politics
      for (const i in politics) {
        that.columns1.push(politics[i])
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;

  .add_btn {
    text-align: center;
    margin: 10px 0;

    ::v-deep .van-button--primary {
      background-color: #a52a2a;
      border: 1px solid #ebedf0;
    }
  }

  .delete-button {
    height: 100%;
  }

  .add-content {
    background-color: #333333;
  }
}
</style>
